<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%-- JSTL表达式（判断，循环，输出） --%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <%-- 方法表达式（字符串截取，替换） --%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<div class="comment-wrap">
    <div class="pet_comment_list_wap"><div class="pet_comment_list_title">评论<span style="color: red;">${pageBean.count}</span></div>

        <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab" >

            <div class="am-tabs-bd pet_pl_list">
                <div data-tab-panel-0 class="am-tab-panel am-active" id="comments">

                    <c:forEach var="comment" items="${pageBean.list}">
                        <div class="pet_comment_list_block">
                            <div class="pet_comment_list_block_l"><img src="${comment.headImg}" alt=""></div>
                            <div class="pet_comment_list_block_r">
                                <div class="pet_comment_list_block_r_info">${comment.operatorName}</div>
                                <div class="pet_comment_list_block_r_text" style="padding: 1rem 0px;">${comment.commentContent}</div>
                                <div class="pet_comment_list_block_r_bottom">
                                    <div class="pet_comment_list_bottom_info_l">${comment.createTime}</div>
                                </div>
                            </div>
                            <c:forEach var="reply" items="${comment.replys}">
                                <div class="reply-box" style="/* position: relative; */background: #f3f2f1; margin-top: 2.7rem; margin-left: 6rem; padding: 0.5rem 2.7rem 0.5rem 0.5rem;">
                                    <%--<div style="position: absolute; right: 0; top: 5px;cursor: pointer; z-index: 100;" class="see-box" onclick="search(this)">查看回复<i class="icon i-arrow-down"></i></div>--%>
                                    <div class="reply-content c999" style="position: relative; font-size: 14px;">
                                        <span class="author" style="color: red;">客服回复</span>：
                                            ${reply.replyContent}
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </c:forEach>

                </div>
                <div style="text-align: center; padding-top: 10px; font-size: 1.2rem;" id="loadArticles">
                    <c:if test="${pageBean.totalPage gt pageBean.currentPage}">
                        <a class="pet_article_dowload_Pg" href="javascript:;" onclick="load()">查看更多评论</a>
                    </c:if>
                    <c:if test="${pageBean.totalPage <= pageBean.currentPage}">
                        <a class="pet_article_dowload_Pg" href="javascript:;" onclick="load()">没有了</a>
                    </c:if>
                </div>

                <div style="height: 5rem;"></div>

                <div style="text-align: left;background: #e5e5e5;padding: 1rem;width: 100%;" id="ddd">
                    <input id="content" style="margin-left: 0.5rem;border: none;padding: 0.5rem;width: 80%;border-radius: 2rem;outline: none;">
                    <a href="javascript:;" style="vertical-align: middle;padding-left: 0.5rem; cursor: pointer;" onclick="content()">发表</a>
                </div>

                <%--<div style="text-align: left;background: #e5e5e5;padding: 1rem;position: fixed;left: 1rem;z-index: 99999;bottom: 2.1rem;width: 100%;">
                    <input id="content" style="margin-left: 0.5rem;border: none;padding: 0.5rem;width: 80%;border-radius: 2rem;outline: none;">
                    <a href="javascript:;" style="vertical-align: middle;padding-left: 0.5rem;" onclick="content()">发表</a>
                </div>--%>
            </div>
        </div>
    </div>
</div>
<script>

    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        $("#ddd").scrollTop(scrollTop);
    });

    var page = 0;

    load();

    function load(){
        page++;
        $.post("<%=basePath%>comment/getComments", {page: page, serviceId: $('#serviceId').val(), serviceType: $('#serviceType').val()}, function (data) {
            var $data = $(data);
            if(page == 1){
                $(".comment-wrap").html($data.html());
            }else {
                $("#comments").append($data.find("#comments").html());
                $("#loadArticles").html($data.find("#loadArticles").html());
            }
        });
    }

/*    function search(obj){
        var next = $(obj).next();
        if(!next.hasClass("active")){
            next.addClass("active");
            $(obj).addClass("active").html('<span>收起</span><i class="icon i-arrow-down "></i>');
        }else{
            next.removeClass("active");
            $(obj).removeClass("active").html('查看回复<i class="icon i-arrow-down"></i>');
        }
    }*/

    function content(){
        var content = $.trim($("#content").val());
        if(!content){
            alert("请您输入评论内容");
            return;
        }
        $.post("<%=basePath%>comment/saveComment", {serviceId: $('#serviceId').val(), serviceType: $('#serviceType').val(), commentContent: content}, function (res) {
            if(res.code == 1){
                page = 0;
                load();
            }else{
                alert(res.message);
            }
        });
    }
</script>